<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    span.error {
      color: #fff;
      font-size: 12px;
      position: absolute;
      top: 20px;;
      left: 20px;
      background: rgba(238, 42, 21, .6);
      padding: 3px;
      border-radius: 2px;
      z-index: 1;
    }
    .form-group{
      position: relative;
    }
  </style>
</head>
<body>
  <form action="">
    <div class="form-group">
      <label for="">用户名</label>
      <input type="text" name="username">
    </div>
    <div class="form-group">
        <label for="">密码</label>
        <input type="text" name="password">
      </div>
    <div class="form-group">
      <input type="submit">
    </div>
  </form>
  <div id="message"></div>
  <script src="../libs/jquery-1.12.4.js"></script>
  <script src="./jquery-validation-1.14.0/dist/jquery.validate.js"></script>
  <script>
    $(function () {
      $('form').validate({
        /* errorPlacement: function (error, element) {
          // 一旦添加了这个函数，就得去设置对应的错误信息的位置
          console.log(error, element)
          $('#message').html(error)
        }, */
        errorElement: 'span',
        // focusCleanup: true,
        // focusInvalid: false,
        // errorClass: ''
        rules: {
          username: 'required',
          password: 'required'
        },
        success: function (label) {
          // console.log(label)
          label.text('验证成功')
        }
      })
    })
  </script>
</body>
</html>